<template>
  <div id="FlodLeft" style="height: 80vh; width: 100%" ref="left"></div>
</template>

<script>
export default {
  name: "Mainleft",
  props: ["x"], //this.message
  data() {
    return {
      //   x:0,
      cityData: [
        {
          name: "成都",
          con: [
            1992, 1994, 1996, 1997, 1997, 1998, 2001, 2002, 2004, 2004, 2004,
            2009, 2014, 2017, 2021, 2022, 2022, 2022, 2022, 2023, 2026, 2026,
            2026, 2028, 2028, 2028, 2029, 2029, 2030, 2031, 2034, 2034, 2039,
            2043, 2049, 2049, 2050, 2052, 2059, 2070, 2093, 2109, 2131, 2161,
            2209, 2249, 2295, 2370, 2469, 2561, 2697, 2948, 3124, 3268, 3268,
            3369, 3461, 3565, 3687, 3795, 3917, 4045, 4181, 4330, 4476, 4686,
            4865, 4977, 5034, 5124, 5194, 5194, 5194, 5194, 5194, 5194,
          ],
          new: [
            3, 2, 3, 3, 0, 4, 3, 2, 5, 1, 1, 11, 10, 8, 4, 1, 0, 0, 2, 3, 3, 1,
            1, 2, 2, 0, 1, 1, 2, 2, 3, 1, 10, 7, 9, 1, 3, 5, 17, 24, 32, 33, 42,
            84, 122, 85, 110, 157, 194, 188, 281, 357, 433, 511, 552, 695, 727,
            868, 770, 668, 718, 509, 456, 441, 407, 344, 283, 185, 82, 156, 100,
            149, 155, 167, 122, 140,
          ],
        },
        {
          name: "自贡",
          con: [
            19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
            20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
            21, 21, 22, 23, 25, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27,
            27, 27, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 29, 32, 33, 33, 34,
            35, 35, 35, 35, 35, 35, 35, 35,
          ],
          new: [
            0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 4, 4, 8, 2, 5, 0, 0, 1, 1,
            0, 0, 0, 4, 0, 10, 8, 9, 7, 5, 9, 5, 8, 8, 11, 8, 15, 27, 38, 60,
            31, 29, 14, 9, 7, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "攀枝花",
          con: [
            20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
            20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
            20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
            20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
            21, 21, 21, 21, 21, 21, 21, 21,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 4, 6, 0, 5, 13, 22, 11,
            10, 1, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "泸州",
          con: [
            84, 84, 84, 84, 85, 85, 85, 85, 87, 89, 91, 102, 102, 102, 102, 102,
            102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102,
            102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102,
            102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102, 102,
            107, 107, 107, 112, 112, 113, 114, 121, 125, 127, 135, 139, 142,
            143, 147, 150, 150, 150, 150, 150, 150,
          ],
          new: [
            0, 0, 0, 1, 3, 0, 0, 1, 44, 159, 15, 21, 7, 6, 10, 5, 3, 3, 4, 2, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 3, 1, 1, 0,
            0, 0, 0, 1, 1, 0, 1, 10, 18, 26, 15, 24, 17, 31, 40, 20, 19, 17, 13,
            13, 11, 19, 12, 6, 12, 21, 14, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "德阳",
          con: [
            23, 23, 23, 23, 26, 32, 34, 35, 39, 42, 46, 46, 47, 48, 48, 49, 49,
            49, 49, 49, 49, 49, 49, 49, 50, 50, 50, 50, 51, 51, 52, 52, 52, 53,
            53, 53, 53, 53, 53, 53, 53, 53, 53, 62, 71, 79, 111, 119, 129, 153,
            184, 200, 222, 232, 232, 235, 240, 243, 249, 251, 253, 260, 261,
            261, 261, 262, 263, 263, 263, 263, 264, 264, 264, 264, 264, 264,
          ],
          new: [
            0, 0, 0, 3, 6, 8, 6, 3, 9, 6, 6, 0, 2, 5, 6, 3, 7, 1, 0, 0, 0, 0, 0,
            0, 1, 0, 0, 0, 2, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 14, 26,
            95, 190, 96, 155, 194, 216, 351, 305, 224, 183, 153, 121, 88, 84,
            53, 40, 32, 18, 13, 13, 12, 15, 11, 5, 6, 6, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "绵阳",
          con: [
            92, 115, 121, 128, 140, 146, 151, 154, 154, 154, 154, 154, 154, 154,
            154, 154, 154, 154, 154, 154, 154, 154, 154, 154, 154, 154, 161,
            181, 208, 210, 210, 211, 212, 213, 214, 215, 216, 216, 217, 217,
            217, 217, 217, 217, 217, 217, 217, 217, 217, 218, 220, 220, 224,
            228, 228, 229, 229, 229, 229, 229, 229, 229, 229, 229, 229, 229,
            229, 229, 229, 229, 229, 229, 229, 229, 229, 229,
          ],
          new: [
            9, 27, 12, 12, 14, 10, 5, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 7, 26, 41, 69, 27, 17, 16, 7, 6, 4, 3, 1, 1, 4, 2, 3,
            0, 0, 0, 0, 0, 0, 3, 10, 16, 15, 38, 37, 58, 55, 53, 49, 47, 38, 32,
            27, 23, 36, 20, 18, 16, 16, 13, 10, 6, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "广元",
          con: [
            22, 22, 22, 22, 24, 25, 25, 26, 26, 26, 26, 26, 26, 26, 26, 26, 26,
            27, 31, 36, 37, 37, 37, 37, 37, 37, 37, 37, 37, 37, 40, 40, 40, 40,
            40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40,
            40, 40, 40, 40, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 45, 45, 45,
            48, 48, 48, 48, 48, 48, 48, 48,
          ],
          new: [
            0, 0, 0, 0, 5, 1, 4, 1, 2, 1, 2, 3, 2, 2, 0, 0, 0, 6, 17, 13, 15,
            18, 20, 49, 28, 19, 14, 6, 12, 10, 8, 3, 1, 0, 0, 1, 21, 15, 7, 6,
            6, 5, 5, 3, 0, 4, 1, 0, 7, 9, 6, 9, 11, 15, 18, 29, 38, 35, 33, 26,
            25, 23, 19, 19, 23, 19, 17, 10, 10, 6, 5, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "遂宁",
          con: [
            167, 167, 167, 169, 169, 169, 169, 169, 169, 169, 169, 169, 169,
            169, 169, 169, 169, 169, 169, 169, 170, 170, 170, 170, 170, 170,
            170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
            170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
            170, 170, 170, 170, 170, 170, 170, 171, 171, 171, 171, 171, 171,
            171, 171, 171, 171, 171, 171, 171, 171, 171, 171, 171,
          ],
          new: [
            1, 3, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 3, 2, 0,
            0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 8, 6, 7, 7,
            2, 0, 6, 4, 3, 9, 7, 10, 13, 14, 18, 13, 24, 17, 9, 10, 7, 8, 7, 17,
            11, 13, 4, 0, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "内江",
          con: [
            312, 312, 314, 314, 314, 314, 314, 314, 314, 314, 314, 317, 317,
            317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317,
            317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317, 317,
            317, 317, 318, 318, 318, 318, 318, 319, 319, 319, 328, 338, 349,
            360, 364, 364, 367, 368, 369, 369, 369, 370, 370, 372, 374, 374,
            376, 381, 382, 382, 382, 382, 382, 382, 382, 382, 382,
          ],
          new: [
            2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 2,
            5, 7, 34, 61, 57, 43, 88, 54, 18, 24, 13, 20, 34, 27, 13, 22, 20,
            14, 17, 28, 59, 38, 5, 2, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "乐山",
          con: [
            15, 15, 15, 15, 16, 16, 16, 16, 16, 16, 16, 16, 16, 17, 18, 18, 19,
            19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19,
            21, 23, 32, 37, 39, 46, 47, 48, 49, 49, 51, 51, 51, 52, 53, 53, 54,
            54, 55, 55, 55, 59, 59, 59, 62, 72, 75, 77, 79, 81, 86, 88, 90, 93,
            94, 94, 96, 96, 96, 96, 96, 96,
          ],
          new: [
            0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 3, 1, 2, 1, 0, 1, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 20, 9, 3, 8, 2, 1, 1, 1, 2,
            0, 3, 4, 3, 2, 4, 1, 4, 19, 6, 31, 33, 40, 48, 66, 10, 8, 9, 10, 10,
            11, 3, 6, 3, 0, 2, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "南充",
          con: [
            76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 78, 78, 78, 78, 78, 78, 78,
            78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78,
            78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78,
            78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 80, 81, 81, 81, 81, 81,
            81, 81, 81, 81, 81, 81, 81, 81,
          ],
          new: [
            0, 0, 0, 1, 3, 0, 1, 4, 2, 4, 4, 7, 2, 22, 12, 17, 21, 20, 16, 2, 4,
            5, 5, 7, 7, 8, 7, 4, 3, 5, 9, 8, 8, 9, 7, 5, 3, 0, 3, 1, 0, 1, 5, 2,
            1, 2, 1, 4, 3, 10, 4, 1, 3, 10, 5, 9, 8, 44, 67, 33, 4, 8, 17, 12,
            17, 17, 25, 3, 13, 15, 8, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "眉山",
          con: [
            38, 39, 40, 41, 42, 43, 43, 43, 43, 43, 43, 43, 43, 43, 43, 43, 43,
            43, 43, 43, 43, 43, 43, 44, 44, 44, 45, 45, 45, 45, 45, 45, 45, 45,
            45, 45, 45, 45, 45, 49, 49, 49, 50, 50, 50, 51, 57, 58, 58, 62, 64,
            66, 66, 68, 68, 69, 71, 75, 84, 90, 92, 92, 93, 96, 98, 101, 105,
            109, 110, 111, 111, 111, 111, 111, 111, 111,
          ],
          new: [
            3, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 1, 0, 8, 2,
            6, 2, 6, 7, 14, 10, 10, 21, 19, 15, 14, 16, 29, 18, 36, 46, 54, 79,
            43, 73, 63, 86, 18, 12, 5, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "宜宾",
          con: [
            270, 270, 270, 270, 270, 271, 274, 275, 275, 277, 277, 278, 278,
            279, 279, 279, 283, 284, 284, 284, 284, 284, 284, 284, 284, 285,
            286, 287, 287, 287, 287, 287, 287, 287, 287, 287, 287, 287, 287,
            287, 287, 288, 288, 288, 288, 288, 289, 289, 289, 297, 298, 298,
            299, 299, 299, 300, 300, 301, 302, 302, 303, 304, 304, 304, 307,
            307, 311, 313, 315, 319, 319, 319, 319, 319, 319, 319,
          ],
          new: [
            0, 0, 0, 0, 3, 2, 5, 1, 3, 3, 1, 1, 0, 2, 0, 0, 5, 1, 0, 0, 0, 0, 0,
            0, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 0, 0, 1, 0,
            3, 0, 3, 17, 13, 13, 30, 22, 17, 23, 20, 15, 22, 20, 24, 49, 42, 27,
            29, 55, 63, 69, 114, 5, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "广安",
          con: [
            261, 261, 261, 261, 261, 261, 261, 261, 261, 261, 261, 261, 261,
            262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262,
            262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262,
            262, 262, 262, 262, 262, 262, 262, 265, 266, 266, 266, 267, 267,
            268, 268, 268, 273, 275, 280, 280, 280, 283, 284, 289, 291, 293,
            294, 297, 297, 298, 298, 298, 298, 298, 298, 298, 298,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 6, 9, 7, 5,
            11, 2, 8, 6, 8, 7, 5, 8, 8, 12, 10, 19, 2, 4, 14, 11, 11, 5, 8, 5,
            8, 0, 2, 0, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "达州",
          con: [
            48, 48, 48, 48, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49,
            49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49,
            49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49,
            49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49,
            49, 49, 49, 49, 49, 49, 49, 49,
          ],
          new: [
            0, 0, 1, 0, 2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 3, 3,
            1, 4, 0, 3, 6, 4, 16, 16, 22, 12, 25, 20, 15, 10, 7, 5, 5, 6, 6, 5,
            6, 5, 1, 0, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "雅安",
          con: [
            8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 10, 11, 11, 11, 12, 12, 12, 12,
            12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,
            12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 13, 13,
            13, 14, 15, 15, 16, 16, 18, 18, 18, 19, 20, 21, 21, 21, 21, 21, 21,
            21, 21, 21, 21, 21,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 3, 4, 4, 1, 2, 1, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 4, 0, 2, 2, 1, 0, 2, 2, 17, 11, 8, 8, 11, 3, 5, 0,
            0, 0, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "巴中",
          con: [
            44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44,
            44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44,
            46, 47, 49, 51, 63, 74, 77, 84, 87, 90, 92, 93, 94, 94, 94, 97, 97,
            97, 98, 98, 98, 98, 98, 104, 106, 112, 112, 112, 112, 112, 113, 113,
            113, 113, 113, 113, 113, 113, 113, 113, 113, 113,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 1, 3, 11, 13, 16, 4, 10, 5, 11,
            12, 1, 5, 3, 1, 5, 2, 3, 3, 17, 14, 98, 151, 237, 3, 50, 19, 28, 20,
            7, 16, 25, 19, 7, 10, 4, 3, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "资阳",
          con: [
            46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46,
            46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 47,
            47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47,
            47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47,
            47, 47, 47, 47, 47, 47, 47, 47,
          ],
          new: [
            0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 3, 8, 0, 0, 2, 0,
            0, 0, 0, 0, 3, 7, 9, 9, 10, 17, 17, 11, 17, 9, 6, 5, 9, 3, 1, 2, 11,
            7, 5, 0, 1, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "阿坝",
          con: [
            103, 103, 103, 104, 104, 104, 104, 104, 104, 104, 104, 104, 104,
            104, 104, 104, 104, 104, 104, 104, 104, 104, 104, 104, 104, 104,
            104, 104, 104, 104, 104, 105, 105, 110, 110, 110, 110, 110, 110,
            110, 110, 110, 110, 110, 110, 110, 110, 110, 112, 113, 115, 121,
            136, 143, 143, 152, 159, 169, 180, 190, 192, 194, 196, 197, 198,
            200, 201, 201, 201, 202, 203, 203, 203, 203, 203, 203,
          ],
          new: [
            0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 2, 3, 21, 29, 52, 36, 63, 30, 37, 40, 46, 62, 74, 95, 101, 56,
            40, 23, 15, 7, 8, 2, 3, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "甘孜",
          con: [
            95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95,
            95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95,
            95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95,
            95, 95, 95, 95, 95, 95, 95, 95, 96, 98, 98, 102, 102, 102, 102, 102,
            102, 102, 102, 102, 102, 102, 102, 102, 102,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 24, 2, 19, 2, 1, 0, 1, 3,
            3, 0, 0, 0, 0, 0, 0, 0,
          ],
        },
        {
          name: "凉山",
          con: [
            38, 38, 38, 38, 38, 38, 38, 38, 39, 39, 43, 46, 47, 51, 52, 52, 53,
            53, 53, 53, 53, 53, 53, 53, 53, 53, 53, 53, 53, 53, 54, 54, 55, 55,
            57, 57, 57, 57, 57, 57, 57, 58, 58, 60, 60, 60, 64, 67, 71, 71, 73,
            80, 81, 83, 83, 87, 88, 89, 92, 98, 107, 109, 110, 112, 114, 116,
            117, 117, 117, 117, 117, 117, 117, 117, 117, 117,
          ],
          new: [
            0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 5, 5, 5, 5, 2, 1, 1, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 0, 0, 0, 0, 0, 0, 1, 1, 10, 8,
            4, 10, 12, 20, 9, 18, 15, 6, 14, 12, 11, 10, 13, 15, 23, 33, 26, 5,
            4, 8, 6, 13, 13, 16, 9, 6, 0, 0, 0, 0, 0,
          ],
        },
      ],
      mychart: undefined,
      options: undefined,
      xData: undefined,
    };
  },

  mounted() {
    this.mychart = this.$echarts.init(this.$refs.left);
    this.init();
    this.$echarts.init(document.getElementById("FlodLeft"));
    },
  //变化后
  watch: {
    x(newValue, oldValue) {
      const x = this.x;
      this.option = {
        //背景颜色
        title: {
          text: this.cityData[x].name + "疫情详情",
          textStyle: { color: "#fff" },
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          with: 1000,
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          x: "46%",
          top: "11%",
          textStyle: {
            color: "#90979c",
          },
          data: ["累计确诊", "新增、疑似"],
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(204,187,225,0.5)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: this.xData,
          },
        ],

        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(204,187,225,0.5)",
              },
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 50,
            with: 100,
            xAxisIndex: [0],
            bottom: 30,

            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#5B3AAE",
            },
            textStyle: {
              color: "rgba(204,187,225,0.5)",
            },
            fillerColor: "rgba(67,55,160,0.4)",
            borderColor: "rgba(204,187,225,0.5)",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            zoom: 2.0, //这里是关键，一定要放在 series中
            name: "累计确诊",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              color: "#fb6a4a",
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },

            data: this.cityData[x].con,
          },
          {
            name: "新增、疑似",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              color: "#b82ba4",
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            // data: [
            //   2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019,
            //   3433, 3544, 3885, 4208, 3372, 3484, 3915, 3748, 3675, 4009, 4433,
            //   3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298,
            // ],
            data: this.cityData[x].new,
          },
        ],
      };
      this.mychart.setOption(this.option);
    },
  },

  methods: {
    init() {
      this.xData = (function () {
        var data = [];
        var m = 10;
        for (var i = 1; i < 32; i++) {
          if (m == 10 && i > 30) {
            m++;
            i = 1;
            data.push(m + "月" + i + "日");
          }
          if (m == 11 && i == 31) {
            m++;
            i = 1;
            data.push(m + "月" + i + "日");
          }
          data.push(m + "月" + i + "日");
          if (m == 12 && i == 15) {
            break;
          }
        }
        return data;
      })();
      const x = this.x;

      this.option = {
        title: {
          text: this.cityData[x].name + "疫情详情",
          textStyle: { color: "#fff" },
        },
        //背景颜色
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          with: 1000,
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          x: "46%",
          top: "11%",
          textStyle: {
            color: "#90979c",
          },
          data: ["累计确诊", "新增、疑似"],
        },

        calculable: true,
        xAxis: [
            {
            axisLabel: {
              color: "rgba(204,187,225,0.7)", // 设置坐标轴标签字体颜色
            },
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(204,187,225,0.5)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data:this.xData,
          },
        ],

        yAxis: [
          {
            axisLabel: {
              color: "#ffffff", // 设置坐标轴标签字体颜色
            },
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(204,187,225,0.5)",
              },
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 50,
            with: 100,
            xAxisIndex: [0],
            bottom: 30,

            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#5B3AAE",
            },
            textStyle: {
              color: "rgba(204,187,225,0.7)",
            },
            fillerColor: "rgba(67,55,160,0.4)",
            borderColor: "rgba(204,187,225,0.5)",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            zoom: 2.0, //这里是关键，一定要放在 series中
            name: "累计确诊",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              color: "#fb6a4a",
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },

            data: this.cityData[x].con,
          },
          {
            name: "新增、疑似",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              color: "#b82ba4",
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            // data: [
            //   2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019,
            //   3433, 3544, 3885, 4208, 3372, 3484, 3915, 3748, 3675, 4009, 4433,
            //   3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298,
            // ],
            data: this.cityData[x].new,
          },
        ],
      };
      this.mychart.setOption(this.option);
    },
  },
};
</script>

<style scope></style>
